import { useCallback, useState } from "react";
import {
  ReactFlow,
  addEdge,
  Handle,
  useNodesState,
  useEdgesState,
  useUpdateNodeInternals,
  useReactFlow,
  ReactFlowProvider,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";

import TextUpdaterNode from "../../components/TextUpdaterNode";

function RandomHandleNode({ id }) {
  const updateNodeInternals = useUpdateNodeInternals();
  const [handleCount, setHandleCount] = useState(0);
  const randomizeHandleCount = useCallback(() => {
    setHandleCount(Math.floor(Math.random() * 10));
    updateNodeInternals(id);
  }, [id, updateNodeInternals]);

  return (
    <>
      {Array.from({ length: handleCount }).map((_, index) => (
        <Handle
          key={index}
          type="target"
          style={{ left: index * 10 }}
          position="left"
          id={`handle-${index}`}
        />
      ))}

      <div>
        <button onClick={randomizeHandleCount}>Randomize handle count</button>
        <p>There are {handleCount} handles on this node.</p>
      </div>
    </>
  );
}

const rfStyle = {
  backgroundColor: "#B8CEFF",
};
/**
 * "default"，"input"，"output"，"group"
 */
const initialNodes = [
  {
    id: "node-1",
    type: "textUpdater",
    position: { x: 0, y: 0 },
    data: { value: 123 },
  },
  {
    type: "output",
    id: "node-2",
    data: { label: "node 2" },
    targetPosition: "top",
    position: { x: 0, y: 200 },
  },
  {
    type: "output",
    id: "node-3",
    data: { label: "node 3" },
    targetPosition: "top",
    position: { x: 200, y: 200 },
  },
  {
    type: "randomHandle",
    id: "node-4",
    data: { lable: "node 4" },
    position: { x: 0, y: 300 },
  },
];
const initialEdges = [
  { id: "edge-1", source: "node-1", target: "node-2" },
  { id: "edge-2", source: "node-1", target: "node-3" },
];
const nodeTypes = {
  textUpdater: TextUpdaterNode,
  randomHandle: RandomHandleNode,
};
function Flow() {
  const [nodes, , onNodesChange] = useNodesState(initialNodes);
  // const nodess = useNodes();
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const { updateNodeData } = useReactFlow();
  console.log(222);

  const onConnect = useCallback(
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges]
  );

  const handleUpdateNode = () => {
    console.log(1);
    updateNodeData("node-1", () => ({ value: "aaaaa" }));
  };

  return (
    <>
      <div style={{ height: "100%" }}>
        <button onClick={handleUpdateNode}>testst</button>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          nodeTypes={nodeTypes}
          fitView
          style={rfStyle}
        />
      </div>
    </>
  );
}

export default function App(props) {
  return (
    <ReactFlowProvider>
      <Flow {...props} />
    </ReactFlowProvider>
  );
}
